<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-28 20:03:13
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-28 20:03:14
-->
<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-11-28 18:35:56
 * @LastEditors: mxy
 * @LastEditTime: 2022-11-28 20:02:50
-->
<template>
  <div>
    <h2>计算属性</h2>
    <p>{{ getName }}</p>
    <p>{{ getName }}</p>
    <p>{{ getName }}</p>
    <hr />
    <p>{{ getNames() }}</p>
    <p>{{ getNames() }}</p>
    <p>{{ getNames() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xing: "孟",
      ming: "欣怡",
    };
  },
  //计算属性，函数格式，但是使用时不加（），当属性使用，必须return一个值
  //计算属性有缓存值，即有缓存时，找缓存数据，就不再调用方法了
  computed: {
    getName() {
      console.log("计算属性");
      return this.xing + this.ming;
    },
  },
  methods: {
    getNames() {
      console.log("方法");
      return this.xing + this.ming;
    },
  },
};
</script>

<style>
</style>